<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Document</title>
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/inputSkin.css" />

	</head>

	<body>
		<input type="range" min="10" max="50" value="20" style="width: 300px;" />
		<script type="text/javascript">
			$('input[type="range"]').on('input', function() {
				$('body').css('font-size', this.value + 'px')
			}).trigger('input');
		</script>
		<!--ksin1-->
		<br />
		<div class="inputSkin skin1"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin1"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin1"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin1"><input type="checkbox" checked disabled /><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin1"><input type="radio" name="0" /><label for="">单选框</label></div>
		<div class="inputSkin skin1"><input type="radio" name="0" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin1"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin1"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--ksin1.red-->
		<br />
		<div class="inputSkin skin1 red"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin1 red"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin1 red"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin1 red"><input type="checkbox" checked disabled /><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin1 red"><input type="radio" name="1" /><label for="">单选框</label></div>
		<div class="inputSkin skin1 red"><input type="radio" name="1" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin1 red"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin1 red"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--skin1.yellow-->
		<br />
		<div class="inputSkin skin1 yellow"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin1 yellow"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin1 yellow"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin1 yellow"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin1 yellow"><input type="radio" name="2" /><label for="">单选框</label></div>
		<div class="inputSkin skin1 yellow"><input type="radio" name="2" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin1 yellow"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin1 yellow"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--skin1.blue-->
		<br />
		<div class="inputSkin skin1 blue"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin1 blue"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin1 blue"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin1 blue"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin1 blue"><input type="radio" name="3" /><label for="">单选框</label></div>
		<div class="inputSkin skin1 blue"><input type="radio" name="3" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin1 blue"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin1 blue"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--skin1.F5B617-->
		<br />
		<div class="inputSkin skin1 F5B617"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin1 F5B617"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin1 F5B617"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin1 F5B617"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin1 F5B617"><input type="radio" name="3" /><label for="">单选框</label></div>
		<div class="inputSkin skin1 F5B617"><input type="radio" name="3" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin1 F5B617"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin1 F5B617"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--skin2-->
		<br />
		<div class="inputSkin skin2"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin2"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin2"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin2"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin2"><input type="radio" name="4" /><label for="">单选框</label></div>
		<div class="inputSkin skin2"><input type="radio" name="4" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin2"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin2"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--skin2.red-->
		<br />
		<div class="inputSkin skin2 red"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin2 red"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin2 red"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin2 red"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin2 red"><input type="radio" name="5" /><label for="">单选框</label></div>
		<div class="inputSkin skin2 red"><input type="radio" name="5" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin2 red"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin2 red"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--skin2.yellow-->
		<br />
		<div class="inputSkin skin2 yellow"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin2 yellow"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin2 yellow"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin2 yellow"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin2 yellow"><input type="radio" name="6" /><label for="">单选框</label></div>
		<div class="inputSkin skin2 yellow"><input type="radio" name="6" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin2 yellow"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin2 yellow"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

		<!--skin2.blue-->
		<br />
		<div class="inputSkin skin2 blue"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin2 blue"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin2 blue"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin2 blue"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin2 blue"><input type="radio" name="7" /><label for="">单选框</label></div>
		<div class="inputSkin skin2 blue"><input type="radio" name="7" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin2 blue"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin2 blue"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />
		<!--skin2.F5B617-->
		<br />
		<div class="inputSkin skin2 F5B617"><input type="checkbox" /><label for="">复选框</label></div>
		<div class="inputSkin skin2 F5B617"><input type="checkbox" checked/><label for="">复选框</label></div>
		<div class="inputSkin skin2 F5B617"><input type="checkbox" disabled /><label for="">复选框</label></div>
		<div class="inputSkin skin2 F5B617"><input type="checkbox" checked disabled/><label for="">复选框</label></div>
		<br />
		<div class="inputSkin skin2 F5B617"><input type="radio" name="7" /><label for="">单选框</label></div>
		<div class="inputSkin skin2 F5B617"><input type="radio" name="7" checked/><label for="">单选框</label></div>
		<div class="inputSkin skin2 F5B617"><input type="radio" disabled/><label for="">单选框</label></div>
		<div class="inputSkin skin2 F5B617"><input type="radio" checked disabled/><label for="">单选框</label></div>
		<br />

	</body>

</html>